<template>
	<view>
		<u-navbar title="人脉扩展" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#fff" titleStyle="color:#fff" bgColor="#1B1B1B" rightText="更多" @leftClick="leftClick"
			@rightClick="changeRight"></u-navbar>
		<view class="user mart flex_dq">
			<view class="user_l flex_c">
				<image :src="userinfo.head_img" mode="aspectFill"></image>
			</view>
			<view class="user_c flex_Z">
				<view class="user_c_name flex_dq">
					<text class="f30 c0">{{userinfo.nickname}}</text>
					<text class="f24 c4">{{userinfo.phone_format}}</text>
				</view>
				<text class="f26 c4">用户身份：{{identityAll.name}}</text>
			</view>
			<view class="user_r flex_dq" @click="upgradeBenefits">
				<text>升级权益</text>
			</view>
		</view>
		<view class="blockchain flex_dq">
			<view class="blockchain_box "> 
				<text>区块链地址:</text>
				<text>{{userinfo.eth_address}}</text>
			</view>
			<image src="../../static/icon/i_copy.png" mode="aspectFill" @click="isCopy"></image>
		</view>
		<view class="wrap">
			<view class="wrapitem">
				<view class="itemleft">
					<image src="../../static/image/wh.png" mode="" @click="gettype(1)"></image>
					<text>DAO收益：{{userinfo.dao_profit}}</text>
				</view>
				<view class="itemright" @click="godaolist">
					查看领取记录 <uni-icons type="right" color="#824F17" size="16" ></uni-icons>
				</view>
			</view>
			<view class="wrapitem">
				<view class="itemleft">
					<image src="../../static/image/wh.png" mode="" @click="gettype(2)" ></image>
					<text>DAO贡献：{{userinfo.dao_contribution}}</text>
				</view>
				<view class="itemright" @click="godaolisttwo" >
					查看变动记录 <uni-icons type="right" color="#824F17" size="16" ></uni-icons>
				</view>
			</view>
			<view class="btnwrap">
				<view class="lqbtn2" @click="goDAOzz">
					DAO贡献转赠
				</view>
				<view class="lqbtn" @click="lqshow=true">
					DAO收益领取到钱包
				</view>
			</view>
			

		</view>
		<view class="invitationCode flex_Z">
			<view class="invitation flex_dq">
				<view class="invitation_l flex_Z">
					<view class="my_code flex_dq">
						<text>我的邀请码：{{userinfo.invite_code}}</text>
						<image src="../../static/icon/copy4.png" mode="" @click="isCopy2"></image>
					</view>
					<text class="f26">累计推荐人数：{{userinfo.direct_num}}</text>
					<text class="f26">累计推荐亭长人数：{{memberAttach.village_constable_number}}</text>
					<text class="f26">累计推荐华小福人数：{{userinfo.member_hxf_number}}</text>
					<text class="f26"  v-if="statuss"  style="margin-top: 30rpx;" >本周团队小部落推荐夏小慧人数：{{xxh_recommend_number}}</text>
					<text class="f26"   v-if="statuss"  >本期推荐亭长人数：{{village_number}}</text>
					<text class="f26" v-if="statuss"  >本期推荐华小福人数：{{hxf_number}}</text>
					
					<text class="f26"  v-if="statuss" >注:每月11日至次月10日为一个统计期</text>
				</view>
				<view class="invitation_r flex_ZC" @click="goInvite">
					<image src="../../static/icon/i_fxzq.png" mode=""></image>
					<text>邀请赚钱</text>
				</view>
			</view>
			<view class="transaction flex_ld">
				<text>首发交易：￥{{memberAttach.frist_market_price}}</text>
				<text>出售交易：￥{{memberAttach.sell_price}}</text>
			</view>
		</view>

		<view class="recommendation flex_Z">

			<view class="navtab flex_ld_a">
				<view class="navtab_box flex_c">
					<text>注册时间</text>
					<view class="xuanze flex_Z">
						<image :src="upSelect1? select:noselect" @click.stop="click1('up')"></image>
						<image :src="downSelect1? select2:noselect2" @click.stop="click1('down')"></image>
					</view>
				</view>
				<view class="navtab_box flex_c">
					<text>首发交易</text>
					<view class="xuanze flex_Z">
						<image :src="upSelect2? select:noselect" @click.stop="click2('up')"></image>
						<image :src="downSelect2? select2:noselect2" @click.stop="click2('down')"></image>
					</view>
				</view>
				<view class="navtab_box flex_c">
					<text>出售交易</text>
					<view class="xuanze flex_Z">
						<image :src="upSelect3? select:noselect" @click.stop="click3('up')"></image>
						<image :src="downSelect3? select2:noselect2" @click.stop="click3('down')"></image>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in networkingList" :key="item.id">
				<view class="user  flex_dq">
					<view class="user_l flex_c">
						<image src="../../static/image/logo.png" mode=""></image>
					</view>
					<view class="user_c flex_Z">
						<view class="user_c_name flex_dq">
							<text class="f30 c0">{{item.nickname}}</text>
							<text class="f24 c4 realName "
								:class="item.is_real?'':'nos'">{{item.is_real?'已实名':'未实名'}}</text>
							<image class="levels" :src="item.identity.images" mode="aspectFill"></image>
							<image class="levels2" v-if="item.is_member_hxf"
								src="https://images.fulezhenxuan.cn/17217859226302.png" mode="aspectFill"></image>
								<image class="levels2"  v-if="item.is_xxh"
									src="https://images.fulezhenxuan.cn/uploads/20241031/17303430517997.png" mode="aspectFill"></image>

						</view>
						<text class="f26 c4">{{item.phone_format}}</text>
					</view>
				</view>
				<view class="transaction_s marb flex_ld">
					<text class="f28 c0">首发交易：￥{{item.frist_market_price}}</text>
					<text class="f28 c0">出售交易：￥{{item.sell_price}}</text>
				</view>
			</view>
			<!-- 暂无数据 / 加载更多 -->
			<noDatas :xxxList="networkingList" :status="status"></noDatas>
		</view>
		<u-popup :show="shuoming" :round="10" mode="center" bgColor="transparent" @close="shuoming=false" :closeable="true">
			<view class="shuo_content">
				<view class="shuo_tit">
					说明
				</view>
				<view class="shuo_txt" >
				{{content}}
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">领取DAO收益，需要消耗等额DA0贡献，当前可领取收益为: 6000.50</text>
				
				<view class="prompt_ntm" @click="goreal">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<u-popup :show="lqshow" :round="10" mode="bottom" bgColor="transparent" @close="lqshow=false" :closeable="true">
			<view class="lqwrap">
				<view class="tits">
					收益领取
				</view>
				<view class="iptwrap">
					<input type="digit" v-model="number" placeholder="输入领取金额" />
				</view>
				<view class="lqitem">
					DAO贡献：{{userinfo.dao_contribution}}
				</view>
				<view class="lqitem" style="color: rgba(255,255,255,0.6);">
					提示：领取金额需要消耗同等的DAO贡献
				</view>
				<view class="btn" @click="sub">
					领取
				</view>
			</view>
		</u-popup>
		<u-popup :show="showpass" mode="center" @close="showpass=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="showpass=false,password=''">
						取消
					</view>
					<view class="other_btn2" @click="lqsub">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		memberActivity,receiveProfit,config
	} from "../../api/other.js";
	import {
		getuserinfo
	} from "../../api/index.js";
	import {
		networkExpansion
	} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				select: '../../static/icon/i_xz.png',
				select2: '../../static/icon/i_xz2.png',
				noselect: '../../static/icon/i_nzx.png',
				noselect2: '../../static/icon/i_nzx2.png',
				upSelect1: true,
				downSelect1: false,
				upSelect2: false,
				downSelect2: false,
				upSelect3: false,
				downSelect3: false,
				order_type: 1,
				order_rule: 1,
				userinfo: {},
				identityAll: {},
				memberAttach: {},
				networkingList: [],
				downList: [{
						id: 1,
						name: '注册时间',
						type: false

					},
					{
						id: 2,
						name: '首发交易',
						type: false
					},
					{
						id: 3,
						name: '出售交易',
						type: false
					},

				],
				hxf_number: "",
				village_number: "",
				statuss:"",
				shuoming:false,
				tipShow:false,
				lqshow:false,
				number:"",
				showpass:false,
				password:"",
				xxh_recommend_number:"",
				content:"",
				config:null
			}
		},
		onLoad() {
			this.getlist()
			this.initList()
			this.getuser()
			this.getconfig()
		},
		methods: {
			goDAOzz(){
				uni.navigateTo({
					url:"/pagesMy/networkRights/daozz"
				})
			},

			gettype(id){
				if(id==1){
					this.shuoming=true
					this.content=this.config.dao_profit_vaule
				}else{
					this.shuoming=true
					this.content=this.config.dao_contribution_value
				}
			},
			getconfig(){
				config().then(res=>{
					this.config=res.data
				})
			},
			lqsub(){
				receiveProfit({
					price:this.number,
					password:this.password
				}).then(res=>{
					if(res.code==1){
						this.showpass=false
						this.password=''
						this.lqshow=false
						this.number=0
						this.getuser()
					}
					uni.$u.toast(res.msg)
				})
			},
			sub(){
				if(this.number==0){
					uni.$u.toast("请输入DAO收益")
				}else if(this.number> Number(this.userinfo.dao_contribution) ){
					console.log(this.number,this.userinfo.dao_contribution,"0000000000")
					uni.$u.toast("领取金额大于DAO贡献")
				}else if(this.userinfo.dao_contribution==0){
					uni.$u.toast("DAO贡献为0，无法领取")
				}else if(this.number>Number(this.userinfo.dao_profit_vaule)){
					uni.$u.toast("领取金额大于DAO收益")
				}else{
					this.showpass=true
				}
			},
			godaolist(){
				uni.navigateTo({
					url:"/pagesMy/mywallet/daolist"
				})
			},
			godaolisttwo(){
				uni.navigateTo({
					url:"/pagesMy/mywallet/daolisttwo"
				})
			},
			getlist() {
				memberActivity().then(res => {
					this.statuss=res.data.status
					if (res.data.status == 1) {
						this.hxf_number = res.data.hxf_number
						this.village_number = res.data.village_number
						this.xxh_recommend_number=res.data.xxh_recommend_number
					}
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					this.userinfo = res.data
					this.identityAll = res.data.identity
					this.memberAttach = res.data.member_attach
				})
			},
			// 初始化
			initList() {
				console.log(this.order_type);
				console.log(this.order_rule);
				let data = {
					page: this.page,
					size: this.size,
					order_type: this.order_type,
					order_rule: this.order_rule
				};
				networkExpansion(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.networkingList = this.page == 1 ? list : this.networkingList.concat(list);
						console.log(this.networkingList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},

			// 更多
			changeRight() {
				uni.navigateTo({
					url: '/pagesMy/networkRights/myEarnings'
				})
			},
			isCopy() {
				uni.setClipboardData({
					data: this.userinfo.eth_address,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			// 分享
			isCopy2() {
				uni.setClipboardData({
					data: this.userinfo.invite_code,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			// 邀请好友
			goInvite() {
				uni.navigateTo({
					url: '/pagesMy/setting/invitefriend'
				})
			},
			upgradeBenefits() {
				uni.navigateTo({
					url: '/pagesMy/networkRights/upgrade'
				})
			},
			click1(val) {
				console.log(val, '1111');
				this.page = 1
				this.networkingList = []
				this.order_type = 1
				if (val == 'up') {
					this.upSelect1 = true
					this.downSelect1 = false

					this.upSelect2 = false
					this.upSelect3 = false
					this.downSelect2 = false
					this.downSelect3 = false
					this.order_rule = 1
				} else {
					this.downSelect1 = true
					this.upSelect1 = false

					this.upSelect2 = false
					this.upSelect3 = false
					this.downSelect2 = false
					this.downSelect3 = false
					this.order_rule = 2
				}
				this.initList()
			},
			click2(val) {
				this.page = 1
				this.networkingList = []
				this.order_type = 2
				console.log(val, '2222');
				if (val == 'up') {
					this.upSelect2 = true
					this.downSelect2 = false

					this.upSelect1 = false
					this.upSelect3 = false
					this.downSelect1 = false
					this.downSelect3 = false
					this.order_rule = 1
				} else {
					this.downSelect2 = true
					this.upSelect2 = false
					this.upSelect1 = false
					this.upSelect3 = false
					this.downSelect1 = false
					this.downSelect3 = false
					this.order_rule = 2
				}
				this.initList()
			},
			click3(val) {
				this.page = 1
				this.networkingList = []
				this.order_type = 3
				console.log(val, '3333');
				if (val == 'up') {
					this.upSelect3 = true
					this.downSelect3 = false

					this.upSelect1 = false
					this.upSelect2 = false
					this.downSelect1 = false
					this.downSelect2 = false
					this.order_rule = 1
				} else {
					this.downSelect3 = true
					this.upSelect3 = false

					this.upSelect1 = false
					this.upSelect2 = false
					this.downSelect1 = false
					this.downSelect2 = false
					this.order_rule = 2
				}
				this.initList()
			},
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background: #1B1B1B;
	}
</style>
<style scoped lang="scss">

	.btnwrap{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 690rpx;
		.lqbtn{
			width: 309rpx;
			height: 56rpx;
			background: #824F17;
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			// position: absolute;
			// bottom: 20rpx;
			// left: 50%;
			// transform: translate(-50%);
			font-weight: 500;
			font-size: 28rpx;
			color: #E7CEA3;
			text-align: center;
			line-height: 56rpx;
			
		}
		.lqbtn2{
			width: 209rpx;
			height: 56rpx;
			background: #824F17;
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			// position: absolute;
			// bottom: 20rpx;
			// left: 50%;
			// transform: translate(-50%);
			font-weight: 500;
			font-size: 28rpx;
			color: #E7CEA3;
			text-align: center;
			line-height: 56rpx;
			
		}
	}
	.lqwrap{
		width: 750rpx;
		height: 465rpx;
		background: #292929;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		.tits{
			text-align: center;
			padding-top: 60rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.iptwrap{
			>input{
				width: 626rpx;
				height: 82rpx;
				background: #1A1A1A;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: rgba(255,255,255,0.6);
				padding-left: 30rpx;
			}
			
		}
		.lqitem{
			width: 656rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: rgba(255,255,255,0.8);
		}
		.btn{
			width: 692rpx;
			height: 80rpx;
			background: linear-gradient( 270deg, #EBDDC5 0%, #E1BF83 100%);
			border-radius: 281rpx 281rpx 281rpx 281rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #824F17;
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
			margin-top: 10rpx;
		}
	}
	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item{
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #292929;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #fff;
		padding-top: 30rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #fff;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
	.shuo_content{
		width: 670rpx;
		margin: 0 auto;
		min-height: 400rpx;
		background-color:#292929;
		border-radius: 20rpx;
		.shuo_tit{
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}
		.shuo_txt{
			width: 600rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	.wrap{
		width: 694rpx;
		height: 221rpx;
		background: linear-gradient( 270deg, #ECDEC7 0%, #E2BF82 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 auto;
		padding-top: 20rpx;
		position: relative;
		.wrapitem{
			width: 100%;
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			align-items: center;
			.itemleft{
				display: flex;
				align-items: center;
				>image{
					width: 25rpx;
					height: 25rpx;
					margin-left: 20rpx;
				}
				>text{
					// width: ;
					margin-left: 10rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #824F17;
				}
			}
			.itemright{
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #824F17;
				
			}
			
		}

	}
	.user {
		width: 750rpx;
		margin-top: 50rpx;
	}

	.mart {
		margin-top: 50rpx;
	}

	.user_l {
		width: 20%;
	}

	.user_l>image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.user_c {
		width: 60%;
	}

	.user_c_name {
		margin-bottom: 10rpx;
	}

	.user_r {
		width: 25%;
	}

	.levels {
		width: 100rpx;
		height: 36rpx;
		margin-left: 16rpx;
	}

	.levels2 {
		width: 46rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.user_r>text {
		width: 156rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		color: #663F0A;
		font-size: 26rpx;
		background: linear-gradient(270deg, #F2D89A 0%, #E3B863 100%);
		border-radius: 400rpx 400rpx 400rpx 400rpx;
	}

	.realName {
		width: 76rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		border-radius: 6rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-left: 20rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
	}

	.nos {
		opacity: 0.5;
	}

	.blockchain {
		width: 690rpx;
		margin: 40rpx auto;
		overflow: hidden;
	}

	.blockchain_box {
		display: flex;
		align-items: center;
		width: 640rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #A6A5AF;
	}

	.blockchain_box>text:nth-child(1) {
		width: 24%;
	}

	.blockchain_box>text:nth-child(2) {
		width: 76%;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.blockchain>image {
		width: 26rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}

	.invitationCode {
		width: 690rpx;
		/* height: 256rpx; */
		margin: 20rpx auto;
		padding-top: 20rpx;
		background: linear-gradient(90deg, #ECDEC7 0%, #E2BF82 100%);
		border-radius: 20rpx;
		color: #824F17;
	}

	.invitation {
		width: 86%;
		/* height: 200rpx; */
		margin: 0 auto;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #6A4A1220;
	}

	.invitation_l {
		width: 74%;
	}

	.my_code {
		font-size: 34rpx;
		margin-bottom: 20rpx;
	}

	.my_code>image {
		width: 28rpx;
		height: 28rpx;
	}

	.invitation_r {
		width: 30%;
		font-size: 24rpx;
	}

	.invitation_r>image {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 10rpx;
	}

	.transaction {
		width: 86%;
		margin: 30rpx auto;
		font-size: 26rpx;
	}

	.transaction_s {
		width: 92%;
		margin: 0rpx auto;
		font-size: 26rpx;
	}

	.recommendation {
		width: 100%;
		min-height: 1000rpx;
		background: #262626;
		/* background: pink; */
		border-radius: 56rpx 56rpx 0 0;
		margin-top: 60rpx;
	}

	.titles {
		color: #ffffff;
		font-size: 32rpx;
	}

	.navtab {
		width: 100%;
		margin: 30rpx 0;
	}

	.navtab_box {
		width: 186rpx;
		height: 52rpx;
		background:#262626;
		border-radius: 26rpx;
		color: #A6A5AF;
		font-size: 26rpx;
	}

	.xuanze>image {
		width: 22rpx;
		height: 22rpx;
	}

	.xuanze>image:nth-child(1) {
		transform: translateY(4rpx);
	}

	.xuanze>image:nth-child(2) {
		transform: translateY(-4rpx);
	}

	.marb {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #ffffff10;
	}


	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
	}
</style>